<template>
  <div class="project-detail">
    <!-- 返回按钮 -->
    <section class="project-detail__back">
      <div class="container">
        <ElButton @click="$router.back()" :icon="ArrowLeft">
          返回项目列表
        </ElButton>
      </div>
    </section>

    <div v-if="project">
      <!-- 项目头部 -->
      <section class="project-detail__header section">
        <div class="container">
          <h1 class="project-detail__title">{{ project.title }}</h1>
          <p class="project-detail__description">{{ project.description }}</p>
          
          <div class="project-detail__meta">
            <ElTag size="large" type="info">
              <ElIcon><Calendar /></ElIcon>
              {{ project.date }}
            </ElTag>
            <ElTag
              v-for="tag in project.tags"
              :key="tag"
              size="large"
            >
              {{ tag }}
            </ElTag>
          </div>
          
          <div class="project-detail__actions">
            <ElButton
              v-if="project.demoUrl"
              type="primary"
              size="large"
              :icon="View"
              @click="openLink(project.demoUrl)"
            >
              在线演示
            </ElButton>
            <ElButton
              v-if="project.githubUrl"
              size="large"
              :icon="Position"
              @click="openLink(project.githubUrl)"
            >
              查看代码
            </ElButton>
          </div>
        </div>
      </section>
      
      <!-- 项目封面 -->
      <section class="project-detail__cover section">
        <div class="container">
          <ElImage
            :src="project.image"
            :alt="project.title"
            fit="cover"
            class="project-detail__image"
          >
            <template #error>
              <div class="image-error">
                <ElIcon :size="100"><Picture /></ElIcon>
                <p>图片加载失败</p>
              </div>
            </template>
          </ElImage>
        </div>
      </section>
      
      <!-- 项目详情 -->
      <section class="project-detail__content section">
        <div class="container">
          <div class="project-detail__grid">
            <!-- 项目概述 -->
            <div class="detail-section">
              <h2 class="detail-section__title">
                <ElIcon><Document /></ElIcon>
                项目概述
              </h2>
              <p class="detail-section__text">
                {{ project.details?.overview || project.description }}
              </p>
            </div>
            
            <!-- 主要功能 -->
            <div class="detail-section" v-if="project.details?.features">
              <h2 class="detail-section__title">
                <ElIcon><List /></ElIcon>
                主要功能
              </h2>
              <ul class="detail-section__list">
                <li v-for="(feature, index) in project.details.features" :key="index">
                  {{ feature }}
                </li>
              </ul>
            </div>
            
            <!-- 技术栈 -->
            <div class="detail-section" v-if="project.details?.technologies">
              <h2 class="detail-section__title">
                <ElIcon><Tools /></ElIcon>
                技术栈
              </h2>
              <div class="tech-tags">
                <ElTag
                  v-for="tech in project.details.technologies"
                  :key="tech"
                  size="large"
                  effect="plain"
                >
                  {{ tech }}
                </ElTag>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 项目截图 -->
      <section
        v-if="project.details?.screenshots && project.details.screenshots.length > 0"
        class="project-detail__screenshots section"
      >
        <div class="container">
          <h2 class="section-title">项目截图</h2>
          <ElCarousel :interval="5000" arrow="always" height="400px">
            <ElCarouselItem v-for="(screenshot, index) in project.details.screenshots" :key="index">
              <ElImage
                :src="screenshot"
                fit="contain"
                class="screenshot-image"
              >
                <template #error>
                  <div class="image-error">
                    <ElIcon :size="100"><Picture /></ElIcon>
                  </div>
                </template>
              </ElImage>
            </ElCarouselItem>
          </ElCarousel>
        </div>
      </section>
      
      <!-- 相关项目 -->
      <section class="project-detail__related section">
        <div class="container">
          <h2 class="section-title">相关项目</h2>
          <div class="related-grid">
            <ProjectCard
              v-for="relatedProject in relatedProjects"
              :key="relatedProject.id"
              :project="relatedProject"
            />
          </div>
        </div>
      </section>
    </div>
    
    <!-- 项目未找到 -->
    <div v-else class="project-detail__not-found">
      <div class="container">
        <ElResult
          icon="warning"
          title="项目未找到"
          sub-title="抱歉，您访问的项目不存在"
        >
          <template #extra>
            <ElButton type="primary" @click="$router.push('/projects')">
              返回项目列表
            </ElButton>
          </template>
        </ElResult>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  ArrowLeft,
  Calendar,
  View,
  Position,
  Picture,
  Document,
  List,
  Tools
} from '@element-plus/icons-vue'
import { useProjectsStore } from '@/stores/projects'
import ProjectCard from '@/components/sections/ProjectCard.vue'

const route = useRoute()
const router = useRouter()
const projectsStore = useProjectsStore()

// 获取当前项目
const project = computed(() => {
  return projectsStore.getProjectById(route.params.id)
})

// 获取相关项目（同类别的其他项目，最多3个）
const relatedProjects = computed(() => {
  if (!project.value) return []
  
  return projectsStore.projects
    .filter(p => p.id !== project.value.id && p.category === project.value.category)
    .slice(0, 3)
})

// 打开外部链接
function openLink(url) {
  window.open(url, '_blank', 'noopener,noreferrer')
}
</script>

<style lang="scss" scoped>
.project-detail {
  &__back {
    padding: $spacing-lg 0;
    background: var(--bg-secondary);
  }
  
  &__header {
    text-align: center;
  }
  
  &__title {
    font-size: $font-size-4xl;
    margin-bottom: $spacing-md;
    
    @include respond-to('md') {
      font-size: $font-size-5xl;
    }
  }
  
  &__description {
    font-size: $font-size-lg;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto $spacing-xl;
    line-height: 1.8;
  }
  
  &__meta {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-sm;
    justify-content: center;
    margin-bottom: $spacing-xl;
  }
  
  &__actions {
    display: flex;
    gap: $spacing-md;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  &__cover {
    background: var(--bg-secondary);
  }
  
  &__image {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: $radius-xl;
    box-shadow: var(--shadow-xl);
  }
  
  &__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: $spacing-2xl;
    
    @include respond-to('md') {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  &__screenshots {
    background: var(--bg-secondary);
  }
  
  &__related {
    background: var(--bg-secondary);
  }
}

.detail-section {
  background: var(--bg-primary);
  padding: $spacing-xl;
  border-radius: $radius-lg;
  box-shadow: var(--shadow-md);
  
  &__title {
    display: flex;
    align-items: center;
    gap: $spacing-sm;
    font-size: $font-size-2xl;
    margin-bottom: $spacing-lg;
    color: $primary-color;
  }
  
  &__text {
    font-size: $font-size-base;
    color: var(--text-secondary);
    line-height: 1.8;
  }
  
  &__list {
    list-style: none;
    
    li {
      position: relative;
      padding-left: $spacing-lg;
      margin-bottom: $spacing-md;
      color: var(--text-secondary);
      line-height: 1.6;
      
      &::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: $primary-color;
        font-weight: bold;
      }
    }
  }
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: $spacing-sm;
}

.screenshot-image {
  width: 100%;
  height: 100%;
}

.image-error {
  @include flex-center;
  flex-direction: column;
  height: 100%;
  color: var(--text-tertiary);
  
  p {
    margin-top: $spacing-md;
  }
}

.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: $spacing-xl;
  
  @include respond-to('md') {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @include respond-to('lg') {
    grid-template-columns: repeat(3, 1fr);
  }
}
</style>

